<template>
    <childComponent />
</template>

<script setup lang="jsx">
import { ref,reactive } from "vue";

const isShowProfile = ref(false);
const info = reactive({
    name: '赵云',
    age: 18,
    occupation: '镇东将军'
});

const childComponent = () => {
    const handleSearch = () => {
        isShowProfile.value = !isShowProfile.value;
    }

    return (
        <div>
            <div>我是{info.name},我今年{info.age}岁了</div>
            <div style={{display: isShowProfile.value ? 'block' : 'none', color: 'red'}}>我的职业是：{info.occupation}</div>
            <el-button type="primary" onClick={handleSearch}>{ isShowProfile.value ? '隐藏' : '显示'}资料</el-button>
        </div>
    )
}
</script>
